forum

home / developersection / forums / how to create modal pop-up with partial view in mvc?

Ask Question

how to create modal pop-up with partial view in MVC?

Anonymous User 1618 04-May-2017
Please help me in creating modal pop-up with partial view in MVC.
c# mvc 
Updated on 04-May-2017
Anonymous User

Other

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

Manish Kumar

Manish Kumar

04-May-2017

 

In index page

 
@model TestSol.Models.RegistrationForm
@{
   
Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
   
<meta name="viewport" content="width=device-width" />
   
<link href="~/Content/bootstrap.css" rel="stylesheet" />
   
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
   
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
   
<script src="~/Scripts/bootstrap.min.js"></script>
   
<script src="~/Scripts/bootstrap-datepicker.js"></script>
   
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
   
<script src="~/Scripts/jquery.validate.min.js"></script>
   
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.2/jquery.validate.unobtrusive.js"></script>
   
<script src="~/Scripts/modernizr-2.8.3.js"></script>
 
   
<title>Registration</title>
 
</head>
<body>
   
<div class="container">
     
       
<div class="row" style="margin-top: 15px; margin-bottom: 15px;">
            <div class="col-md-8">
                <div
class="input-group" id="adv-search">
                    <input type="text" class="form-control" id="txtsearch" placeholder="Search" />
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
                            <button type="button" id="searchButton" class="btn
btn-primary"><span class="glyphicon
glyphicon-search"
aria-hidden="true"></span></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div
class="input-group" id="adv-Add">
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
 
                            <button type="button" id="btnadd" class="btn
btn-primary">Add
</button>
                        </div>
                    </div>
                </div>
            </div>
       
</div>
       
<div id="target">
            @Html.Partial("List");
            @ViewBag.msg
       
</div>
   
</div>
 
 
   
@using (Ajax.BeginForm("Add", "Home", new AjaxOptions
   
{
       
HttpMethod = "POST",
       
UpdateTargetId = "target",
       
OnSuccess = "updateSuccess",
 
   
}, new { id = "form1" }))
   
{
       
<div id="Mymodal-Create" class="modal fade
bd-example-modal-lg"
tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog
modal-lg">
                <div
class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title">Create
                        </h4>
                    </div>
                    <div class="modal-body" id="Create-Body">
                    </div>
 
                    <div class="modal-footer">
                        <input type="Submit" class="btn btn-primary" id="btnsubmit"  value="Add" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close
                        </button>
 
                    </div>
 
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
 
       
</div>
   
}
   
<div id="Mymodal-UserList" class="modal fade
bd-example-modal-lg"
tabindex="-1" role="dialog" aria-labelledby="listLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog
modal-lg">
                <div
class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close close-List">
                            &times;
                        </button>
                        <h4 class="modal-title">Users
                        </h4>
                    </div>
                    <div class="modal-body" id="List-Body">
                    </div>
 
                    <div class="modal-footer">
                         
                        <button type="button" id="close-list" class="btn btn-default
close-List">
                            Close
                        </button>
 
                    </div>
 
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
 
       
</div>
 
 
 
   
<script type="text/javascript">
       
$(function () {
            $('#datepicker').datepicker();
            $(".allownumber").keydown(function (e) {
                // Allow: backspace, delete, tab, escape,
enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Allow: Ctrl+A, Command+A
                    (e.keyCode === 65
&& (e.ctrlKey === true || e.metaKey === true)) ||
                    // Allow: home, end, left,
right, down, up
                    (e.keyCode >= 35
&& e.keyCode <= 40)) {
                    // let it happen, don't do
anything
                    return;
                }
                // Ensure that it is a number and stop
the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
(e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            $('#btnadd').click(function () {
                $.get("Home/Add", function (data) {
                    $("#Create-Body").html(data);
                    $("#Mymodal-Create").modal('show');
 
                });
            });
            $('#btnsubmit').click(function () {
                $.validator.unobtrusive.parse("#form1");                
               // $('#Mymodal-UserList,
#Mymodal-Create').modal('hide');
            });
            $('#searchButton').click(function () {
                $.get("Home/GetUser", { d: $('#txtsearch').val() }, function (data) {
                    $("#target").html(data);
                });
            });
 
       
});
       
function updateSuccess(data) {
            $('form')[0].reset();         
            $("#Mymodal-Create").modal('hide');
       
}
       
$('#close-List').click(function () {
            $("#Mymodal-UserList").modal('hide');
            $("#Mymodal-Create").modal('hide');
         
       
});
       
function filldata(data) {                   
            $("#Create-Body").html(data);
    
       $("#Mymodal-UserList").modal('hide');
       
};
 
   
</script>
 
 
 
</body>
</html>

 


Add.cshtml


@model TestSol.Models.RegistrationForm
 
<div
class="panel-body">
   
@Html.ValidationSummary(false)
   
<div class="form-group">
       
<div class="row">
            <div class="col-md-4">
                <div
class="input-group" id="adv-search">
                     @Html.HiddenFor(model =>
model.Id, new {@Value = 0 })
                    @Html.Label("First Name")<br />@Html.TextBoxFor(model =>
model.FName, new { @class = "form-control", placeholder = "First Name", title = "Enter First
Name" })
                    @Html.ValidationMessageFor(model
=> model.FName)
                   
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
                            <button type="button" id="btnbrowse" class="btn btn-primary" style="margin-top: 23px"><span class="glyphicon
glyphicon-search"
aria-hidden="true"></span></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="col-md-4">
                @Html.Label("Middle Name")<br />@Html.TextBoxFor(model =>
model.MName, new { @class = "form-control", placeholder = "Middle Name", title = "Enter Middle
Name" })
            </div>
            <div class="col-md-4">
                @Html.Label("Last Name")<br />@Html.TextBoxFor(model =>
model.LName, new { @class = "form-control", placeholder = "Last Name", title = "Enter Last Name" })
            </div>
       
</div>
       
<div class="row">
            <div class="col-md-4">
                @Html.Label("DOB")<br />
                @Html.TextBoxFor(model => model.Dob, new { @class = "form-control ", id = "datepicker", placeholder = "Dob", title = "Enter DOB", @value = Model != null && Model.Dob != null ? Model.Dob.ToString("dd/MM/yyyy") : null })
            </div>
            <div class="col-md-4">
                @Html.Label("Mobile Number")<br />@Html.TextBoxFor(model =>
model.Mobile, new { @class = "form-control
allownumber",
placeholder = "Mobile",
title = "Enter
Mobile",
@maxlength = "10"
})
            </div>
            <div class="col-md-4">
                @Html.Label("City")<br />@Html.DropDownListFor(model
=> model.City, new SelectList(ViewBag.Country, "Country", "Country"),
   
"Select
Category",
new { @class = "form-control", placeholder = "City", title = "Enter City" })
            </div>
       
</div>
       
<div class="row">
            <div class="col-md-4">
                @Html.Label("Pin")<br />@Html.TextBoxFor(model =>
model.Pin, new { @class = "form-control
allownumber",
placeholder = "Pin",
title = "Enter
Pin", @maxlength = "6" })@Html.ValidationMessageFor(model
=> model.Pin)
            </div>
            <div class="col-md-4">
                @Html.Label("Address")<br />@Html.TextAreaFor(model =>
model.Address, new { @class = "form-control", placeholder = "Address", title = "Enter Address" })
            </div>
       
</div>
 
   
</div>
 
</div>
 
 
<script>
   
$(function () {
       
$('#datepicker').datepicker();
   
});
   
$('#btnbrowse').click(function () {
       
$.get("Home/GetRecord", function (data) {
            $("#List-Body").html(data);          
            $("#Mymodal-UserList").modal('show');
         
       
});
   
});
   
$('#close-list').click(function () {
       
$("#Mymodal-UserList").modal('hide');
      
   
});
</script>


Output

how to create modal pop-up with partial view in MVC?


I am providing this solution for you, May it helps you.



advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy